<template>
  <div>
    <div v-if="$route.name==='caseAnalyse'">
      <crumb />
      <SelectCourseClass class="top-select" />
      <div style="line-height: 50px;font-weight: bold;font-size: 12px;">
        <span style="margin-right: 30px;">进度：{{caseProgress}}</span>
        <span>领先{{caseStat}}的学生</span>
      </div>
      <div class="main-contianer3 caseManage">
        <div class="top-content">
          <el-table :data="caseList" border style="width: 100%">
            <el-table-column align="center" prop="index" label="序号" width="80">
              <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column align="center" prop="resourceCaseName" label="案例名称">
            </el-table-column>
            <el-table-column align="center" prop="score" label="案例得分" width="100">
            </el-table-column>
            <el-table-column align="center" prop="finishedTime" label="完成时间" width="200">
            </el-table-column>
            <el-table-column align="center" prop="finishedFlag" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.finishedFlag === '0'">未开始</el-tag>
                <el-tag type="success" v-if="scope.row.finishedFlag === '1'">进行中</el-tag>
                <el-tag type="danger" v-if="scope.row.finishedFlag === '2'">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleReport(scope.row.resourceCaseId)" v-if="scope.row.finishedFlag === '2'">查看</el-button>
                <el-button size="mini" type="warning" @click="handleView(scope.row.resourceCaseId)" v-if="scope.row.finishedFlag === '0'">开始作答</el-button>
                <el-button size="mini" type="warning" @click="handleView(scope.row.resourceCaseId)" v-if="scope.row.finishedFlag === '1'">继续作答</el-button>
                <el-button size="mini" type="warning" @click="handleView(scope.row.resourceCaseId)" v-if="scope.row.finishedFlag === '2'">重新作答</el-button>
                <el-button size="mini" type="success" @click="handleHistory(scope.row.resourceCaseId)">查看历史</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <router-view v-else/>
  </div>
</template>

<script>
import { caseIndex } from '@/api/student/training/caseAnalyse'
import SelectCourseClass from '@/components/SelectCourseClass'
export default {
  name: 'caseAnalyse',
  data () {
    return {
      caseList: [],
      caseProgress: '',
      caseStat: ''
    }
  },
  components: {
    SelectCourseClass
  },
  mounted () {
    this.caseIndex()
  },
  methods: {
    async caseIndex () {
      const res = await caseIndex()
      if (res.code === '200') {
        this.caseList = res.data.caseList
        this.caseProgress = res.data.caseProgress
        this.caseStat = res.data.caseStat
      } else {
        this.$message.error(res.message)
      }
    },
    handleView (id) {
      this.$router.push({
        name: 'caseAnalyseView',
        query: {
          id
        }
      })
    },
    handleReport (id) {
      this.$router.push({
        name: 'caseAnalyseReport',
        query: {
          id
        }
      })
    },
    handleHistory (id) {
      this.$router.push({
        name: 'caseAnalyseHistory',
        query: {
          id
        }
      })
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .caseManage-top{
      display: flex;
      justify-content: flex-end;
      padding: 20px 10px;
      width: 100%;
    }
  }
}
</style>
